<script setup>
	import Card from "../components/Card.vue"
	import profile from "../components/Profile.vue"
</script>

<template>
	<div class="card-container">
		<Card :padding="15" class="card">
			<div class="cell-1">
				<div class="news-container">消息内容消息内容消息内容消息内容消息内容消息内容</div>
			</div>
			<div class="cell-2">
				<div class="left">
					<profile></profile>
					<div class="name">
						发布人
					</div>
				</div>
				<div class="right">
					2022-1-3 10:25:35
				</div>
			</div>
		</Card>
	</div>
</template>

<style scoped>
	.card-container {
		margin-bottom: 10px;
		user-select: none;
		cursor: pointer;
		transition: all 0.5s;
	}

	.card {
		transition: all 0.2s;
	}

	.card:hover {
		box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, .1);
		transform: scale(1.03);
	}

	.cell-1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.news-container {
		font-size: 18px;
	}

	.name {
		color: #999;
		font-size: 15px;
		margin: 5px;
	}
	.van-image{
		height: 40px;
		width: 40px;
	}
	.left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.right{
		margin: 5px;
		color: #999;
		font-size: 15px;
	}
	.cell-2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
</style>
